<template>

  <div>
    <div class="recharge-hd">商品订单</div>
    <div class="allorders">
      <div @click="orderform(1)" :class="indent == 1?'cancellation-order cancellation-active':'cancellation-order'">已支付</div>
      <div @click="orderform(2)" :class="indent == 2?'cancellation-order cancellation-active':'cancellation-order'">未支付</div>
    </div>
    <div class="indent">
      <el-table :header-cell-style="{background:'#FAFAFA',color:'#001013',fontWeight:'bold'}" v-loading="loading" :data="tableData" height="526" style="width: 100%">
        <el-table-column prop="message" label="购买商品">
        </el-table-column>
        <el-table-column prop="orderSn" label="订单号">
        </el-table-column>
        <el-table-column prop="orderPrice" width="100" label="金额">
        </el-table-column>
        <el-table-column prop="numbers" label="数量" width="80">
        </el-table-column>
        <el-table-column prop="numbers" label="购买方式" width="100">
          <template>余额购买</template>
        </el-table-column>
        <el-table-column prop="addTime" label="购买时间">
        </el-table-column>
        <el-table-column prop="orderStatus" label="状态/操作" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus==101">未支付</span>
            <el-button type="danger" v-if="scope.row.orderStatus==201" @click="dwoUrl(scope.row)">下载素材</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination background layout="prev, pager, next,sizes,total" v-if="total>0" :total='total' @current-change='current_change' @size-change='size_change' style="text-align: center;  margin-top: 60px;" :page-sizes="[10, 50, 100, 1000]">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goodsOrde',
  data () {
    return {
      loading: false,
      messageType: 3,
      orderStatus: 201,
      tableData: [],
      indent: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  computed: {},

  mounted () {
    this.getOrderList()
  },
  methods: {
    goBuy (e) {
      this.$apis
        .orderDetails({ orderId: e, page: 1, limit: 1000 })
        .then(res => {
          console.log(res.data.data.list)
        })
    },
    cancelOrde (e) {
      this.$confirm('确认取消订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api.CancelOrder({ orderSn: e }).then(res => {
            if (res.data.errno) {
              if (res.data.errno != 0) {
                this.$message.error(res.data.errmsg)
              }
            } else {
              this.$message({
                type: 'success',
                message: '取消成功!'
              })
              this.getOrderList()
            }
          })
        })
        .catch(() => {})
    },
    getOrderList () {
      this.loading = true
      this.$apis
        .orderList({
          typeid: this.orderStatus,
          page: this.page,
          limit: this.limit
        })
        .then(res => {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          this.loading = false
        })
    },
    current_change (e) {
      this.page = e
      this.getOrderList()
    },
    size_change (e) {
      this.limit = e
      this.getOrderList()
    },
    orderform (e) {
      if (this.indent == e) return
      this.indent = e
      if (e == 1) {
        this.orderStatus = 201
      }
      if (e == 2) {
        this.orderStatus = 101
      }
      this.getOrderList()
    },
    dwoUrl (e) {
      this.$apis
        .getDetailst({
          id: e.goodsId
        })
        .then(res => {
          if (res.data.data.downUrl) {
            let a = document.createElement('a')
            a.target = '_blank'
            a.href = res.data.data.downUrl
            a.click()
          } else {
            this.$message.error('咱不能下载请联系管理员...')
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.con-t-select {
  margin-top: 0px;
}
.content {
  display: flex;
  min-height: 100vh;
}
.myorderform {
  flex: 1;
  background-color: #fafafa;
}
.myset {
  text-align: center;
  padding: 70px 20px 50px;
  font-size: 16px;
  img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  div {
    span {
      color: #d1483f;
    }
  }
}
.myorderform-title {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}
.goodsbuy {
  padding: 15px 0px;
  color: #828282;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
}
.goodsbuyatv {
  border-left: 4px solid #d82141;
  background-color: #fff;
}
.orderform {
  background-color: #fff;
  padding: 60px 40px;
  flex: 4;
  box-sizing: border-box;
}
.allorders {
  display: flex;
  margin-bottom: 20px;
}
.cancellation-order {
  border-right: 2px solid #ddd;
  padding: 0px 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}
.cancellation-active {
  color: #d82141;
}
.cancellation-order:last-child {
  border: none;
}
.cancellation-order:first-child {
  padding-left: 0;
}
.uni-input {
  border: 1px solid #e4e4e4;
  width: 30%;
  border-radius: 10px;
  padding: 10px 0;
  padding-left: 20px;
  margin-bottom: 40px;
}
.indent-select {
  display: flex;
  .uni-data-select {
    margin-right: 10px;
  }
  img {
    width: 80px;
    height: 60px;
  }
}
.uni-stat__select {
  margin-right: 40px;
  margin-bottom: 40px;
}
.seedetails {
  color: #fff;
  background: linear-gradient(#d82141, #f36638);
}

.recharge-bd {
  width: 500px;
  margin-left: 150px;
}

.recharg-but {
  margin-left: 100px;
  margin-top: 20px;
}

.particulars {
  margin: 30px 0px;
  padding: 15px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.particulars-item {
  display: flex;
  line-height: 30px;
  b {
    color: #444444;
    font-size: 14px;
    flex: 1;
  }
  span {
    color: #888888;
    font-size: 16px;
    flex: 3;
  }
}

.myInfo {
  margin-top: 10px;
  .icon {
    font-style: normal;
    color: #986e32;
    font-size: 12px;
    background: #ffe863;
    border: 1px #986e32 dashed;
    padding: 2px 3px;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
  }
}
</style>